<template>
  <div class="lt_dialog">
    <!-- 遮罩层 -->
    <Transition name="mask">
      <div
        v-if="modelValue"
        class="lt_dialog__mask"
        :style="maskStyle"
        @click="$emit('update:modelValue', false)"
      ></div>
    </Transition>
    <!-- 类容区域 -->
    <Transition name="content">
      <div v-if="modelValue" class="lt_dialog__content" :style="contentStyle">
        <div v-if="isHeader" class="header">
          <span>{{ title }}</span>
          <closeIcon @click="closeHandler"></closeIcon>
        </div>
        <div class="sub_content">
          <slot></slot>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import closeIcon from './icon/close-icon.vue'
import { ILtDialogEmits, ILtDialogProps } from './type'

const props = withDefaults(defineProps<ILtDialogProps>(), {
  modelValue: false,
  title: '提示',
  isHeader: true,
  isMask: false,
  width: '350px',
  height: '300px',
  offsetX: '50px',
  offsetY: '60px',
  contentBgc: '#171f34cc'
})

const emit = defineEmits<ILtDialogEmits>()

// 计算出是遮罩层的一些样式
const maskStyle = computed(() => {
  return `${props.isMask ? ' background-color: rgba(0, 0, 0, 0.5);' : ''}`
})

// 计算出类容区域的一些样式
const contentStyle = computed(() => {
  return `width: ${props.width}; height: ${props.height};right:${props.offsetX};bottom:${props.offsetY};background-color: ${props.contentBgc};`
})

// 点击关闭图标
const closeHandler = () => {
  emit('update:modelValue', false)
}
</script>

<style scoped lang="scss">
.lt_dialog {
  color: #fff;
  font-size: 1rem;
  .lt_dialog__mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .lt_dialog__content {
    position: absolute;
    border-radius: 10px;
    padding: 10px 20px;
    box-sizing: border-box;
    overflow: hidden;
    transform-origin: right bottom;
    overflow-y: auto;

    .header {
      display: flex;
      line-height: 1.8;
      justify-content: space-between;
      border-bottom: 1px solid #333;
    }
  }
}

/* 遮罩层的动画 */
.mask-enter-from,
.mask-leave-to {
  opacity: 0;
}
.mask-enter-to,
.mask-leave-from {
  opacity: 1;
}
.mask-enter-active,
.mask-leave-active {
  transition: opacity 0.3s ease-in-out;
}

/* 类容的动画 */
.content-enter-from,
.content-leave-to {
  opacity: 0;
  transform: scale(0);
}
.content-enter-to,
.content-leave-from {
  opacity: 1;
  transform: scale(1);
  /* transform: translateX(0); */
}
.content-enter-active,
.content-leave-active {
  transition: all 0.3s ease-in-out;
}
</style>
